<template>
  <div class="product_mian">
    <Header :HeaderTitle="header_title"></Header>
    <div class="cuxiao_main">
      <integra-list :listshuju="xuxaiushuju"></integra-list>
    </div>
    <foo-ter></foo-ter>
  </div>
</template>

<script type="text/javascript">
  import footer from "../footer/index.vue";
  import integralist from "./integralist.vue";
  import Header from "../header/header.vue";
export default {
  name: 'cuxiao',
  data () {
    return {
      header_title:{url:"/",title:"积分专区"},
      xuxaiushuju:[],
      pageshuju:"1",
    }
  },
  methods:{
    integralistshuju:function(page){
      let conent = this,
      _url = "/index.php?g=app&m=shopping&a=jifengoods_list_post",
      _data = {
        page:page
      };
      conent.$http.post(_url,_data).then(function(data){
          if(data.data.status== "1"){
            for (var i = 0; i <data.data.data.jifengoods_list.length; i++) {
              conent.xuxaiushuju.push(data.data.data.jifengoods_list[i])
            }
          }else {
            
          }
      },function(response){});
    }
  },
  created:function(){
    let conent = this;
    conent.integralistshuju();
    window.addEventListener('scroll',function(){ 
      if(document.body.scrollTop + window.innerHeight >= document.body.clientHeight-180) {
        conent.pageshuju++;
        conent.shujujiazai("红酒",conent.pageshuju);
      }  
    }); 
  },
  components:{
    'foo-ter':footer,
    'integra-list':integralist,
    'Header':Header
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.cuciao_banner{
  width: 100vw;
  height: 55.33vw;
  .banner_img{
    display: inline-block;
    width: 100vw;
    height: 55.33vw;
  }
}
.product_mian{
  width: 100vw; 
}
.cuxiao_tab{
  width: 100vw;
  height: 12vw;
  .cuxiao_tab_main{
    width: 100%;
    height: 12vw;
    color: @color1;
    overflow: hidden;
    zoom:1;
    li{
      width: 33.3333%;
      display: inline-block;
      float: left;
      height: 12vw;
      line-height: 12vw;
      background-color: @color;
    }
    .danjian{
      background-color: @color6;
    }
  }
}
</style>